<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/layui/layui.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css">

    <style type="text/css">
        body{background: url("../js/img/w.png") no-repeat;background-size:cover;font-size: 16px;}
        .form{background: rgba(255,255,255,0.2);width:100px;margin:200px auto;}
        #login_form{display: block;}
        #register_form{display: none;}
        .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
        input[type="text"],input[type="password"]{padding-left:26px;}
        .checkbox{padding-left:21px;}

    </style>

</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">金科教育</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        <label th:text="${session.account}"></label>
                    </a>
                </li>
                <li class="layui-nav-item"><a href="javaScript:logout()">退出</a></li>
            </ul>
        </div>
        <!-- 左侧导航 -->
        <div class="layui-side layui-bg-black">
            <div class="navBar layui-side-scroll"></div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 1px;">
                <div class="layui-tab" lay-filter="myTab" lay-allowclose="true">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="-1">欢迎</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 100%">
                        <div class="layui-tab-item layui-show">欢迎入学金科教育图书馆</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>

    var $;
    layui.use(['element'], function(){
        $ = layui.jquery
        var element = layui.element
        //显示左侧菜单
        if($(".navBar").html() == ''){
            $.ajax({
                url:'../web/findNav',
                async:false,
                type:'post',
                dataType:'json',
                success:function (data) {
                    var _this = this;
                    $(".navBar").html(navBar(data)).height($(window).height()-230);
                    element.init();  //初始化页面元素
                    $(window).resize(function(){
                        $(".navBar").height($(window).height()-230);
                    })
                    // 添加新窗口
                    $(".layui-nav .layui-nav-item a").on("click",function(){
                        //判断当前节点是否是子节点
                        if($(this).children("span").length == 0){
                            //判断选项卡是否被打开过
                            if(!hasTab($(this).find("cite").text())){
                                element.tabAdd('myTab', {
                                    title: '<cite>'+$(this).find("cite").text()+'</cite>'//用于演示
                                    ,content:createFrame($(this).attr("data-url"))
                                    ,id: $(this).attr("data-id")
                                })
                                element.tabChange('myTab', $(this).attr("data-id"));
                            }else{
                                element.tabChange('myTab', $(this).attr("data-id"));
                            }
                        }
                    })
                }
            })
        }
    });

    //iframe
    function createFrame(url){
        var h = $(window).height()-200;
        return '<iframe scrolling="auto" frameborder="0"  src="'+ url + '" style="width:100%;height:'+h+'px;"></iframe>';
    }

    //判断选项卡是否打开过
    function hasTab(title){
        var tabIndex = false;
        $(".layui-tab-title li").each(function(){
            if($(this).find("cite").text() == title){
                tabIndex = true;
            }
        })
        return tabIndex;
    }

    //动态拼接左侧导航
    function navBar(data){
        var ulHtml = '<ul class="layui-nav layui-nav-tree" lay-filter="myTree">';
        for(var i=0;i<data.length;i++){
            if(data[i].spread){
                ulHtml += '<li class="layui-nav-item layui-nav-itemed">';
            }else{
                ulHtml += '<li class="layui-nav-item">';
            }
            if(data[i].children != undefined && data[i].children.length > 0){
                ulHtml += '<a href="javascript:;" data-id="'+data[i].id+'">';
                if(data[i].icon != undefined && data[i].icon != ''){
                    if(data[i].icon.indexOf("icon-") != -1){
                        ulHtml += '<i class="iconfont '+data[i].icon+'" data-icon="'+data[i].icon+'"></i>';
                    }else{
                        ulHtml += '<i class="layui-icon" data-icon="'+data[i].icon+'">'+data[i].icon+'</i>';
                    }
                }
                ulHtml += '<cite>'+data[i].title+'</cite>';;
                ulHtml += '<span class="layui-nav-more"></span>';
                ulHtml += '</a>'
                ulHtml += '<dl class="layui-nav-child">';
                for(var j=0;j<data[i].children.length;j++){
                    ulHtml += '<dd><a href="javascript:;" data-id="'+data[i].children[j].id+'" data-url="'+data[i].children[j].href+'">';
                    if(data[i].children[j].icon != undefined && data[i].children[j].icon != ''){
                        if(data[i].children[j].icon.indexOf("icon-") != -1){
                            ulHtml += '<i class="iconfont '+data[i].children[j].icon+'" data-icon="'+data[i].children[j].icon+'"></i>';
                        }else{
                            ulHtml += '<i class="layui-icon" data-icon="'+data[i].children[j].icon+'">'+data[i].children[j].icon+'</i>';
                        }
                    }
                    ulHtml += '<cite>'+data[i].children[j].title+'</cite></a></dd>';
                }
                ulHtml += "</dl>"
            }else{
                ulHtml += '<a href="javascript:;" data-id="'+data[i].id+'" data-url="'+data[i].href+'">';
                if(data[i].icon != undefined && data[i].icon != ''){
                    if(data[i].icon.indexOf("icon-") != -1){
                        ulHtml += '<i class="iconfont '+data[i].icon+'" data-icon="'+data[i].icon+'"></i>';
                    }else{
                        ulHtml += '<i class="layui-icon" data-icon="'+data[i].icon+'">'+data[i].icon+'</i>';
                    }
                }
                ulHtml += '<cite>'+data[i].title+'</cite></a>';
            }
            ulHtml += '</li>'
        }
        ulHtml += '</ul>';
        return ulHtml;
    }

    function logout(){
        location.href="../web/logout";
    }

</script>
</html>